import { useState, useEffect, Fragment } from 'react';
import { NavLink, useNavigationType } from 'react-router-dom';
import { Card, Col, Row, List, Space, Avatar, Drawer, Tag } from 'antd';
import { BarChartOutlined, PieChartOutlined, EditOutlined, EllipsisOutlined, SmileTwoTone } from '@ant-design/icons';
import HomeBarChart from '@/components/Charts/HomeBarChart';
import { HomePieChart } from '@/components/Charts/HomePieChart';
import './index.scss';
import { http } from '@/utils/http';
import { HeartIcon } from '@/utils/HeartIcon';

const { Meta } = Card;

export default function Home() {
  // 获取当前导航类型  -- POP为刷新页面 / REPLACE表示登录之后重定向到此页面
  const navigationType = useNavigationType();
  useEffect(() => {
    // 只有登录成功之后，将抽屉打开 / 刷新页面时，抽屉不打开
    if (navigationType === 'REPLACE') {
      setTimeout(() => {
        setIsDrawerVisible(true);
      }, 600);
    }
  }, [navigationType]);

  const {
    username,
    role: { roleName },
    region,
  } = JSON.parse(window.sessionStorage.getItem('news'));

  const [viewList, setViewList] = useState([]); // 浏览量降序列表
  const [starList, setStarList] = useState([]); // 点赞量降序列表
  const [isDrawerVisible, setIsDrawerVisible] = useState(false); // 抽屉是否显示

  // 获取浏览量降序列表
  const getViewList = async () => {
    // 获取已发布的文章,以浏览量进行降序排序,并且只取前6条
    const { data } = await http.get('/news?publishState=2&_expand=category&_sort=view&_order=desc&_limit=8');
    setViewList(data);
  };

  // 获取点赞量降序列表
  const getStarList = async () => {
    // 获取已发布的文章,以点赞量进行降序排序,并且只取前6条
    const { data } = await http.get('/news?publishState=2&_expand=category&_sort=star&_order=desc&_limit=8');
    setStarList(data);
  };

  useEffect(() => {
    getViewList();
    getStarList();
  }, []);

  // 点击关闭抽屉的回调
  const onDrawerClose = () => {
    setIsDrawerVisible(false);
  };

  return (
    <Fragment>
      <Row gutter={16}>
        <Col span={8}>
          <Card
            hoverable
            title={
              <Fragment>
                <Space>
                  用户最常浏览
                  <BarChartOutlined style={{ color: '#FF2020', fontSize: '17px' }} />
                </Space>
              </Fragment>
            }>
            <List
              height='100%'
              dataSource={viewList}
              renderItem={({ title, id, view }) => (
                <List.Item>
                  <NavLink to={`/news-manage/preview/${id}`}>{title}</NavLink>
                  <div>
                    <Space>
                      <span style={{ color: '#8C8C8C' }}>{view}</span>
                      <SmileTwoTone />
                    </Space>
                  </div>
                </List.Item>
              )}
            />
          </Card>
        </Col>

        <Col span={8}>
          <Card
            hoverable
            title={
              <Space>
                用户点赞最多
                <BarChartOutlined style={{ color: '#FF2020', fontSize: '17px' }} />
              </Space>
            }>
            <List
              dataSource={starList}
              renderItem={({ title, id, star }) => (
                <List.Item>
                  <NavLink to={`/news-manage/preview/${id}`}>{title}</NavLink>
                  <div>
                    <Space>
                      <span style={{ color: '#8C8C8C' }}>{star}</span>
                      <HeartIcon style={{ color: 'hotpink' }} />
                    </Space>
                  </div>
                </List.Item>
              )}
            />
          </Card>
        </Col>

        <Col span={8}>
          <Card
            hoverable
            cover={<img style={{ height: '338px' }} alt='example' src={require('@/assets/R-C.jpeg')} />}
            actions={[
              <PieChartOutlined
                onClick={() => {
                  setIsDrawerVisible(true);
                }}
              />,
              <EditOutlined key='edit' />,
              <EllipsisOutlined key='ellipsis' />,
            ]}>
            <Meta
              avatar={
                <Avatar src='https://xbgroup-1251025085.cos.ap-guangzhou.myqcloud.com/cybertron/users/495101/media/6C472602-856B-4B9C-A9B4-05263BD8AC7F_1_201_a_1684144354019.jpeg' />
              }
              title={username}
              description={
                <Fragment>
                  <Space>
                    <b>{region === '' ? '全球' : region}</b>
                    {roleName}
                  </Space>
                </Fragment>
              }
            />
          </Card>
        </Col>
      </Row>

      {/* 抽屉 */}
      <Drawer
        title='个人新闻分类图示'
        placement='right'
        onClose={onDrawerClose}
        visible={isDrawerVisible}
        width='400px'
        closeIcon={
          <Fragment>
            <Tag style={{ fontWeight: 'normal', backgroundColor: '#DDDDDD', color: '#FAFAFA' }}> ESC </Tag>
          </Fragment>
        }>
        <HomePieChart />
      </Drawer>

      {/* eChatrs图表 */}
      <Card
        hoverable
        title={
          <Fragment>
            <Space>
              新闻分类图示
              <BarChartOutlined style={{ color: '#FF2020', fontSize: '17px' }} />
            </Space>
          </Fragment>
        }
        style={{ marginTop: '30px' }}>
        <HomeBarChart />
      </Card>
    </Fragment>
  );
}
